<template>
  <div class="tem-container">
    <div>
      <el-button class="tem-back" type="primary" size="mini" @click="goBack">返回</el-button>
    </div>
    <div class="tem-testarea">
      <div>
        {{ msg }}
        <tinymce-editor v-model="msg" :disabled="disabled" @onClick="onClick" ref="editor" style="height:100%"></tinymce-editor>
        <button @click="clear">清空内容</button>
        <button @click="disabled = true">禁用</button>
      </div>
    </div>
  </div>
</template>
<script>
import TinymceEditor from "../vue/temComponents/tinymce-editor"
export default {
  components: {
    TinymceEditor
  },
  data() {
    return {
      msg: "Welcome to Use Tinymce Editor",
      disabled: false
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    //鼠标单击的事件
    onClick(e, editor) {
      console.log('Element clicked')
      console.log(e)
      console.log(editor)
    },
    //清空内容
    clear() {
      this.$refs.editor.clear()
    }
  }
};
</script>
<style scoped>
.tem-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tem-back {
  float: left;
  margin: 0 0 10px 0;
}
.tem-testarea {
  width: calc(100% - 20px);
  height: calc(100% - 60px);
  background: #fff;
  box-shadow: 0 0 5px #ccc;
}
</style>